<template>
  <div class="content">
    <UiHeader class="ui-header" :showBanner="false" />
    <img class="banner" src="@/assets/list/banner.png" />
    <div class="ui-center">
      <div class="teach-box">
        <div class="teach-cate" v-for="item in subjectList" :key="item.id">
          <div class="label">{{ item.description }}：</div>
          <div :class="['item', { on: subjectId === 0 }]" @click="ChooseLessonDict(0, 'subject')">全部</div>
          <div
            :class="['item', { on: subjectId === items.value }]"
            v-for="items in item.dictDetails"
            :key="items.id"
            @click="ChooseLessonDict(items.value, 'subject')">
            {{ items.label }}
          </div>
        </div>
        <div class="teach-cate" v-for="item in stageList" :key="item.id">
          <div class="label">{{ item.description }}：</div>
          <div :class="['item', { on: stageId === 0 }]" @click="ChooseLessonDict(0, 'stage')">全部</div>
          <div
            :class="['item', { on: stageId === items.value }]"
            v-for="items in item.dictDetails"
            :key="items.id"
            @click="ChooseLessonDict(items.value, 'stage')">
            {{ items.label }}
          </div>
        </div>
        <div class="teach-cate" v-for="item in gradeList" :key="item.id">
          <div class="label">{{ item.description }}：</div>
          <div :class="['item', { on: gradeId === 0 }]" @click="ChooseLessonDict(0, 'grade')">全部</div>
          <div
            :class="['item', { on: gradeId === items.value }]"
            v-for="items in currentGrade"
            :key="items.id"
            @click="ChooseLessonDict(items.value, 'grade')">
            {{ items.label }}
          </div>
        </div>
        <div class="teach-list">
          <a v-for="item in lessonList" :key="item.id" :href="baseURL + item.fileUrl" target="_blank" class="item">
            <div class="banner">
              <img :src="baseURL + item.coverImg" :alt="item.name" />
            </div>
            <div class="title">{{ item.name }}</div>
          </a>
        </div>
      </div>
    </div>
    <UiFooter />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const { get, baseURL, router } = inject('global');

// 课程案例
let lessonList = ref([]),
  stageList = ref([]),
  subjectList = ref([]),
  subjectId = ref(0),
  fieldworkSubject = ref({}),
  stageId = ref(0),
  gradeList = ref([]),
  gradeId = ref(0),
  currentGrade = computed(() => {
    let list = [];
    if (gradeList.value.length) {
      if (!stageId.value) {
        list = gradeList.value[0].dictDetails;
      } else {
        gradeList.value[0].dictDetails.map(item => {
          if (stageId.value.split('_')[1] == item.value.split('_')[1]) {
            list.push(item);
          }
        });
      }
    }
    return list;
  });
const GetLessonDict = async () => {
  await get('/dict', { blurry: 'textbook_subject' }).then(res => {
    subjectList.value = res.content;
  });
  await get('/dict', { blurry: 'learning_stage' }).then(res => {
    stageList.value = res.content;
  });
  return get('/dict', { blurry: 'learning_grade' }).then(res => {
    gradeList.value = res.content;
  });
};
const GetLessonList = () => {
  get('/textbook', {
    subject: subjectId.value ? subjectId.value : undefined,
    learningGrade: gradeId.value ? gradeId.value : stageId.value ? stageId.value : undefined
  }).then(res => {
    lessonList.value = res.content;
  });
};
const ChooseLessonDict = (value, type) => {
  if (type === 'subject') {
    subjectId.value = value;
    stageId.value = 0;
    gradeId.value = 0;
  } else if (type === 'stage') {
    stageId.value = value;
    gradeId.value = 0;
  } else {
    gradeId.value = value;
  }
  lessonList.value = [];
  GetLessonList();
};

watch(
  () => router.currentRoute.value.query.id,
  () => {
    subjectId.value = router.currentRoute.value.query.id;
    stageId.value = 0;
    gradeId.value = 0;
    lessonList.value = [];
    GetLessonList();
  }
);

onMounted(async () => {
  if (router.currentRoute.value.query.id) {
    subjectId.value = router.currentRoute.value.query.id;
  }
  await GetLessonDict();
  GetLessonList();
});
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
  height: 250px;
  object-fit: cover;
}
.teach-box {
  padding: 82px 0 0 0;
  .teach-cate {
    line-height: 32px;
    font-size: 22px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .label {
      color: #9c2c29;
      margin: 0 0 15px 0;
    }
    .item {
      margin: 0 0 15px 11px;
      padding: 8px 20px;
      color: #3d3d3d;
      cursor: pointer;
      position: relative;
      &:hover,
      &.on {
        background: #9c2c29;
        color: #ffffff;
        &::after {
          content: '';
          display: block;
          width: 10px;
          height: 10px;
          border-radius: 5px;
          border: 1px solid #ffffff;
          position: absolute;
          box-sizing: border-box;
          top: 11px;
          right: 14px;
        }
      }
    }
  }
  .teach-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 82px 0;
    overflow: hidden;
    position: relative;
    .item {
      box-sizing: border-box;
      cursor: pointer;
      transition: all 0.3s ease;
      &:hover {
        transform: translateY(-13px);
        .banner {
          background: #ffffff;
        }
      }
      .title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: bold;
        color: #373737;
        padding: 10px 0 0 0;
        &::before {
          content: '';
          display: block;
          width: 22px;
          height: 40px;
          margin-right: 20px;
          @include bgImg('../../assets/banner-bg_brown.png');
        }
        &::after {
          content: '';
          display: block;
          width: 22px;
          height: 40px;
          margin-left: 20px;
          @include bgImg('../../assets/banner-bg_brown.png');
          transform: rotate(180deg);
        }
      }
      .banner {
        width: 236px;
        height: 297px;
        border: 1px solid #9c2c29;
        box-sizing: border-box;
        padding: 8px;
        background: rgba(255, 255, 255, 0.32);
        box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
}
.content {
  min-height: 100vh;
  background-color: #ede8e2;
}
</style>
